<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>更换邮箱</title>
    <link href="../../css/style.css" rel="stylesheet" type="text/css" />
    <script language="JavaScript" src="../../js/jquery.js" type=""></script>
    <script src="../../js/cloud.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="../../css/styles.css">
    <link rel="stylesheet" href="../../css/jigsaw.css">
    <style type="">
        #msg {
            width: 100%;
            line-height: 40px;
            font-size: 14px;
            text-align: center;
        }
    </style>
    <script language="javascript" type="">
        $(function(){
            $('.login-wrap').css({'position':'absolute','left':($(window).width()-525)/2});
            $(window).resize(function(){
                $('.login-wrap').css({'position':'absolute','left':($(window).width()-525)/2});
            })
        });
    </script>
</head>

<body style="background-color:#1c77ac; background-image:url(../../images/light.png); background-repeat:no-repeat; background-position:center top; overflow:hidden;">

<div id="mainBody">
    <div id="cloud1" class="cloud"></div>
    <div id="cloud2" class="cloud"></div>
</div>


<div class="logintop">
    <span>更换邮箱/通过账户密码更换 通过邮箱验证码更换</span>
    <ul>
        <li><a href="../login.html">登录</a></li>
        <li><a href="upgradePassword.html">忘记密码?</a></li>
    </ul>
</div>

<script src="../../js/jigsaw.js" type=""></script>
<div class="loginbody">

    <span class="systemlogo"></span>

    <div class="login-wrap">
        <div class="login-html">
            <input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1" class="tab">更换方式1</label>
            <input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab">更换方式2</label>
            <div class="login-form">
                <div class="sign-in-htm">

                    <div class="group">
                        <label  class="label">输入您的用户名</label>
                        <label for="account"></label><input id="account" value="" type="text" class="input">
                    </div>

                    <div class="group">
                        <label  class="label">输入您的密码</label>
                        <label for="password"></label><input id="password" value="" type="password" class="input">
                    </div>

                    <div class="group">
                        <label class="label" style="float: left;">新的邮箱地址</label>
                        <label for="newAddress_way1"></label><input id="newAddress_way1" type="text" class="input">
                    </div>

                    <div class="group">
                        <label class="label">输入新邮箱验证码</label>
                        <label for="newMailCode_way1"></label><input id="newMailCode_way1" type="text" style="width: 70%; float: left" class="input" value=""/>
                        <input type="button" class="button" id="getCode_way1" style="width: 30%; float: right" value="获取验证码" onclick="setTime()">
                    </div>

                    <div class="group">
                        <div class="container">
                            <div id="captcha" style="position: relative" data-type="password"></div>
                            <div id="msg"></div>
                        </div>
                    </div>

                    <div style="height: 2px;margin: 60px 0 8px 0;background: rgba(255,255,255,.2)"></div>

                    <div class="group">
                        <input type="button" class="button" value="更换邮箱" id="changeWay1">
                    </div>
                    <div class="hr"></div>

                </div>

                <div class="sign-up-htm">
                    <div class="group">
                        <label class="label">输入您的旧邮箱</label>
                        <label for="oldAddress"></label><input id="oldAddress" type="text" class="input" value="">
                    </div>

                    <div class="group">
                        <label class="label">输入您的邮箱验证码</label>
                        <label for="oldMailCode"></label><input id="oldMailCode" type="text" style="width: 70%; float: left" class="input" value=""/>
                        <input type="button" class="button" id="getCode_way2" style="width: 30%; float: right" value="获取验证码" onclick="setTimeWayOld()">
                    </div>

                    <div class="group">
                        <label class="label">输入您将要更换的邮箱</label>
                        <label for="newAddress"></label><input id="newAddress" type="text" class="input" value="">
                    </div>

                    <div class="group">
                        <label class="label">输入您将要更换的邮箱的验证码</label>
                        <label for="newMailCode_way2"></label><input id="newMailCode_way2" type="text" style="width: 70%; float: left" class="input" value=""/>
                        <input type="button" class="button" id="getCode1_way2" style="width: 30%; float: right" value="获取验证码" onclick="setTimeWayNew()">
                    </div>



                    <div style="height: 2px;margin: 60px 0 8px 0;background: rgba(255,255,255,.2)"></div>
                    <div class="group">
                        <input type="button" class="button" value="确认更换" id="changeWay2">
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<div class="loginbm">版权所有  2021  <a href="" target="_blank">研究开发与实践</a>  XM08-农业大棚信息化</div>
</body>

<script>
    // 标识邮箱是否合法
    let mailRegular=false;
    // 正则判断邮箱是否合法
    function MailRegular(id){
        let re = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
        let text=document.getElementById(id).value;
        if(re.test(text)){
            mailRegular=true;
        }else{
            alert("请输入格式正确的邮箱!")
            mailRegular=false;
        }
    }

    // 设置方式1中验证码倒计时
    // 实现获取验证码的倒计时
    let flagCode=true;
    let backCode;
    let dstMail;
    let getBtn=document.getElementById("getCode_way1")
    let countTime=60;
    function setTime(){
        MailRegular("newAddress_way1");
        if(mailRegular){
            if(countTime===0){
                getBtn.removeAttribute("disabled");
                getBtn.value="获取验证码";
                countTime=60;
                if(countTime===60){
                    flagCode=true;
                    return;
                }
            }else{
                getBtn.setAttribute("disabled",true);
                getBtn.value="重新发送("+countTime+"s)";
                if(flagCode){
                    if(countTime===60){
                        let url="../../Login_ServletAction";
                        let message={};
                        message.Action="sendCode";
                        message.mail=document.getElementById("newAddress_way1").value;
                        message.way="新邮箱的";
                        $.post(url,message,function (json){
                            if(json.ok===200){
                                backCode=json.code;
                                dstMail=json.mail;
                            }else{
                                alert("验证码发送失败!");
                            }
                        });
                        flagCode=false;
                    }
                }
                countTime--;
            }
            setTimeout(setTime,1000);
        }
    }

    // way1 邮箱修改提交
    document.getElementById("changeWay1").onclick=function (){
        if(document.getElementById("account").value==="" || document.getElementById("password")==="" || !mailRegular){
            alert("请输入正确的用户名，密码和新邮箱地址!");
            return;
        }
        if(!flagCode){
            if(backCode===document.getElementById("newMailCode_way1").value){
                let url="../../Login_ServletAction";
                let message={};
                message.account=document.getElementById("account").value;
                message.password=document.getElementById("password").value;
                message.newMail=document.getElementById("newAddress_way1").value;
                if(message.newMail!=dstMail){
                    alert("邮箱地址被篡改！请重新输入！");
                    window.location.reload();
                }
                message.way="way1";
                message.Action="changeMail";
                console.log(message)
                $.post(url,message,function (json){
                    if(json.ok==200){
                        alert("邮箱更换成功!")
                    }else if(json.ok==404){
                        alert("用户或密码错误！");
                    }else{
                        alert("邮箱更换失败！请稍后重试!")
                    }
                })
            }else{
                alert("验证码错误!");
            }
        }else{
            alert("验证码已过期，请重新发送!")
        }
    }
    // 方式一:成功！！

    // 方式二:
    let flagOldCode=true;
    let oldMailRegular=false;
    let oldCountTime=120;
    let oldBackCode;
    let oldMail;

    //方式二，旧邮箱获取验证码
    let getBtnWay2=document.getElementById("getCode_way2");

    function MailRegularWay2(id){
        let re = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
        let text=document.getElementById(id).value;
        if(re.test(text)){
            return true;
        }else{
            alert("请输入格式正确的邮箱!")
            return false;
        }
    }

    function setTimeWayOld(){
        oldMailRegular=MailRegularWay2("oldAddress");
        if(oldMailRegular){
            if(oldCountTime===0){
                getBtnWay2.removeAttribute("disabled");
                getBtnWay2.value="获取验证码";
                oldCountTime=120;
                if(countTime===120){
                    flagCode=true;
                    return;
                }
            }else{
                getBtnWay2.setAttribute("disabled",true);
                getBtnWay2.value="重新发送("+oldCountTime+"s)";
                if(flagOldCode){
                    if(oldCountTime===120){
                        let url="../../Login_ServletAction";
                        let message={};
                        message.Action="sendCode";
                        message.mail=document.getElementById("oldAddress").value;
                        message.way="旧邮箱";
                        console.log(message);
                        $.post(url,message,function (json){
                            if(json.ok===200){
                                oldBackCode=json.code;
                                oldMail=json.mail;
                            }else{
                                alert("验证码发送失败!");
                            }
                        });
                        flagOldCode=false;
                    }
                }
                oldCountTime--;
            }
            setTimeout(setTimeWayOld,1000);
        }
    }

    let newMailRegular=false;
    let newCountTime=60
    let flagNewCode=true;
    let newMail;
    let newBackCode;
    let getBtnWay3=document.getElementById("getCode1_way2");
    function setTimeWayNew(){
        newMailRegular=MailRegularWay2("newAddress");
        if(newMailRegular){
            if(newCountTime===0){
                getBtnWay3.removeAttribute("disabled");
                getBtnWay3.value="获取验证码";
                newCountTime=60;
                if(newCountTime===60){
                    flagNewCode=true;
                    return;
                }
            }else{
                getBtnWay3.setAttribute("disabled",true);
                getBtnWay3.value="重新发送("+newCountTime+"s)";
                if(flagNewCode){
                    if(newCountTime===60){
                        let url="../../Login_ServletAction";
                        let message={};
                        message.Action="sendCode";
                        message.mail=document.getElementById("newAddress").value;
                        message.way="新邮箱";
                        console.log(message);
                        $.post(url,message,function (json){
                            if(json.ok===200){
                                newBackCode=json.code;
                                newMail=json.mail;
                            }else{
                                alert("验证码发送失败!");
                            }
                        });
                        flagNewCode=false;
                    }
                }
                newCountTime--;
            }
            setTimeout(setTimeWayNew,1000);
        }
    }

    // 方式二，提交更换邮箱
    document.getElementById("changeWay2").onclick=function (){
        if(!oldMailRegular || !newMailRegular){
            alert("请输入合法邮箱！");
            return;
        }
        if(!flagOldCode && !flagNewCode){
            if(oldBackCode===document.getElementById("oldMailCode").value){
                if(newBackCode===document.getElementById("newMailCode_way2").value){
                    let url="../../Login_ServletAction";
                    let message={};
                    message.oldMail=oldMail;
                    message.newMail=newMail;
                    message.way="way2";
                    message.Action="changeMail";
                    console.log(message);
                    alert(newMail);
                    alert(oldMail);
                    if(newMail!=document.getElementById("newAddress").value || oldMail!=document.getElementById("oldAddress").value){
                        alert("别自作聪明了，邮箱地址已经被你修改了！");
                        return;
                    }
                    $.post(url,message,function (json){
                        if(json.ok===200){
                            alert("更换成功!");
                        }else if(json.ok===404){
                            alert("旧邮箱不存在！");
                        }else {
                            alert("更换失败!");
                        }
                    })
                }else{
                    alert("新邮箱的验证码错误!");
                }
            }else{
                alert("旧邮箱的验证码错误!");
            }
        }else if(flagOldCode){
            alert("旧邮箱的验证码已过期");
        }else{
            alert("新邮箱的验证码已过期")
        }
        window.location.reload();
    }

</script>
</html>